<template>
    <view class="medal-details">
    	<view class="total">
    		<view class="left">
    			<view class="title">
    				<text>我的勋章</text>
    			</view>
				<text class="tips">记录我的活动成就</text>
    		</view>
			<text class="number">{{total}}</text>
    	</view>
		<view class="year-box" v-for="(list, year) in allMedal" :key="year">
			<view class="year-name">
				<text>{{year}}</text>
			</view>
			<view class="list">
				<view class="item" v-for="item in list" :key="item.id">
					<text class="date">{{handleTime(item.add_time)}}</text>
					<image src="/static/user/medal.png" mode="widthFix"></image>
					<text class="name">{{item.medal_name}}</text>
				</view>
			</view>
		</view>
    </view>
</template>
<script>
export default {
    data() {
        return {
			total: 0, // 勋章总数
			allMedal: {}, // 所有勋章
			accountId: ''
        }
    },
	onLoad(options){
		this.accountId = options.accountId
		this.getUserMedalList()
	},
	methods: {
		// 获取勋章列表
		getUserMedalList(){
			this.api.get('activity/getUserMedalList', {
				accountId: this.accountId
			}).then(res => {
				if(res.data.state == 'ok') {
					let medalList = res.data.medalUserList;
					this.total = medalList.length;
					let allMedal = {}
					for(let i=0; i<medalList.length; i++){
						let year = medalList[i].add_time.split('-')[0]
						if(!allMedal[year]){
							allMedal[year] = []
						}
						allMedal[year].push(medalList[i])
					}
					this.allMedal = allMedal;
					console.log(57, this.allMedal)
				}
			})
		},
		// 处理时间显示 01/15
		handleTime(date){
			if(date){
				date = date.split(' ')[0].split('-').splice(1, 2)
				return date.join('/')
			}
		}
	}
}
</script>
<style lang="less" scoped>
	.total {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 35rpx 32rpx 24rpx;
		border-bottom: 1rpx solid #F0F0F0;
		.title{
			font-size: 34rpx;
			line-height: 38rpx;
			color: #162641;
			font-weight: bold;
			margin-bottom: 25rpx;
		}
		.tips{
			font-size: 26rpx;
			line-height: 38rpx;
			color: #999;
		}
		.number{
			color: #28C2CD;
			font-size: 50rpx;
			font-weight: bold;
		}
	}
	.year-box{
		margin-top: 20rpx;
		padding: 0 32rpx;
	}
	.year-name{
		padding: 20rpx 6rpx 24rpx;
		line-height: 38rpx;
		font-size: 30rpx;
		color: #162641;
		font-weight: bold;
	}
	.list{
		overflow: hidden;
		display: flex;
		flex-wrap: wrap;
		border-bottom: 1rpx solid #F0F0F0;
		&:last-child{
			border: none;
		}
	}
	.item{
		width: 25%;
		margin-bottom: 40rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		font-size: 26rpx;
		.date{
			line-height: 37rpx;
			color: #999999;
		}
		image{
			margin: 8rpx 0 20rpx;
			width: 68rpx;
			// height: 73rpx;
		}
		.name{
			line-height: 37rpx;
		}
	}
</style>